<template>
  <div class="login">
    <div class="login_serviceTitle">
      <img src="@/assets/login/platform_logo.png" class="imgTitle" />
    </div>
    <div class="login_operationPanel">
      <div class="login_operationPanelBg">
        <div class="loginOperationPanel_title">欢迎登录</div>
        <div class="loginOperationPanel_inputArea">
          <input
            placeholder="请输入用户名"
            v-model="username"
            class="loginOperationPanel_input"
          />
          <input
            placeholder="请输入密码"
            v-model="password"
            type="password"
            class="loginOperationPanel_input"
            @keyup.enter="doLogin"
          />
          <div class="loginOperationPanel_rememberMeBg">
            <div
              :class="
                !rememberMeFlag
                  ? 'loginPanelRemember_checkbox'
                  : 'loginPanelRemember_checkbox_o'
              "
              @click="rememberMe"
            ></div>
            <div class="loginPanelRemember_text">记住密码</div>
          </div>
          <div class="loginpanel_btn" @click="doLogin"></div>
        </div>
      </div>
    </div>
    <div class="leftAnimationMove" ref="leftAnimation">
      <!-- <img src="@/assets/login/logo.png" class="leftAnimationImg" /> -->
    </div>
    <div class="rightAnimation" ref="rightAnimation"></div>
    <div class="bottomWave">
      <div class="beforeAnimation">
        <div
          class="wave"
          :style="'background: url(' + imgUrl + 'thumbtack/wave_1.svg) repeat-x;'"
        ></div>
        <div
          class="wave"
          :style="'background: url(' + imgUrl + 'thumbtack/wave_1.svg) repeat-x;'"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";
export default {
  name: "login",
  components: {},
  data() {
    return {
      imgUrl: process.env.PROGOO_IMAGE,
      username: "",
      password: "",
      rememberMeFlag: false,
      timerLeft: "",
      timerRight: "",
    };
  },
  created() {},
  mounted() {
    this.timerLeft = setInterval(() => {
      this.$refs.leftAnimation.className = "leftAnimation";
      this.$refs.rightAnimation.className = "rightAnimationMove";
    }, 2000);
    this.timerRight = setInterval(() => {
      this.$refs.leftAnimation.className = "leftAnimationMove";
      this.$refs.rightAnimation.className = "rightAnimation";
    }, 4000);
    localStorage.removeItem("token");
    if (localStorage.getItem("remember") === "1") {
      this.rememberMeFlag = true;
      this.username = localStorage.getItem("username")
        ? localStorage.getItem("username")
        : "";
      this.password = localStorage.getItem("password")
        ? localStorage.getItem("password")
        : "";
    } else {
      this.rememberMeFlag = false;
      this.username = "";
      this.password = "";
    }
  },
  beforeDestroy() {
    clearInterval(this.timerLeft);
    clearInterval(this.timerRight);
  },
  methods: {
    doLogin() {
      if (this.username === "") {
        this.$notify.error({
          title: "错误",
          message: "请填写用户名",
        });
        return;
      }
      if (this.password === "") {
        this.$notify.error({
          title: "错误",
          message: "请填写密码",
        });
        return;
      }
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "login",
        method: "post",
        data: {
          username: this.username,
          password: this.password,
          needRSA : '1' // 使用RSA加密
        },
      }).then((res) => {
        if (res.data.code == 200) {
          if (res.data.result["x-auth-token"] && res.data.result["x-auth-token"] !== "") {
            localStorage.setItem("token", res.data.result["x-auth-token"]);
            if (this.rememberMeFlag) {
              localStorage.setItem("remember", "1");
              localStorage.setItem("username", this.username);
              localStorage.setItem("password", this.password);
            } else {
              localStorage.setItem("remember", "0");
              localStorage.removeItem("username");
              localStorage.removeItem("password");
              localStorage.setItem("username", this.username);
            }
            localStorage.removeItem("serviceKey");
            localStorage.removeItem("serviceName");
            this.$router.replace({ path: "/service" });
          } else {
            this.$notify.error({
              title: "错误",
              message: "登录失败",
            });
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    rememberMe() {
      this.rememberMeFlag = !this.rememberMeFlag;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@media screen and (min-width: 828px) and (max-width: 1025px) {
  .login {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("~@/assets/login/login_bg.png");
    background-size: 100% 100%;
    overflow: hidden;
    .login_serviceTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 60px;
      .imgTitle {
        width: 80%;
      }
    }
    .login_operationPanel {
      width: 100%;
      display: flex;
      margin-top: 50px;

      align-items: center;
      justify-content: center;
      .login_operationPanelBg {
        width: 400px;
        height: 437px;
        background: url("~@/assets/login/opBg.png");
        background-size: 100% 100%;
        // padding: 86px 3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        z-index: 99;
        .loginOperationPanel_title {
          width: 100%;
          letter-spacing: 7px;
          text-align: center;
          height: 40px;
          font-size: 30px;
          color: white;
          float: left;
        }
        .loginOperationPanel_inputArea {
          width: 100%;
          box-sizing: border-box;
          float: left;
          padding: 0 20%;

          .loginOperationPanel_input {
            width: 88%;
            margin: 0 6% 15px 6%;
            height: 50px;
            border: 4px solid #78c6ff;
            box-sizing: border-box;
            background: #f2fbff;
            border-radius: 8px;
            padding: 0 18px;
            color: #183482;
            font-size: 22px;
          }
          .loginOperationPanel_input:focus {
            border: 4px solid #78c6ff;
            outline: none;
          }
          .loginOperationPanel_input::-webkit-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input::-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-ms-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_rememberMeBg {
            width: 100%;
            height: 35px;
            .loginPanelRemember_checkbox {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox.png");
            }
            .loginPanelRemember_checkbox_o {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox_o.png");
            }
            .loginPanelRemember_text {
              color: white;
              font-size: 17px;
              line-height: 23px;
              float: left;
              margin-left: 12px;
            }
          }
          .loginpanel_btn {
            width: 100%;
            height: 50px;
            cursor: pointer;
            background: url("~@/assets/login/login_btn.png");
            background-size: 100% 100%;
          }
        }
      }
    }
    .leftAnimation {
      position: absolute;
      width: 50%;
      top: 380px;
      left: 0;
      height: 71px;
      line-height: 71px;
      background: url("~@/assets/login/leftImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .leftAnimationImg {
        position: absolute;
        left: 232px;
        top: 15px;
      }
    }
    .leftAnimationMove {
      position: absolute;
      top: 380px;
      left: 0;
      height: 71px;
      line-height: 71px;
      background: url("~@/assets/login/leftImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: leftMove ease-in-out 3s;
      // .leftAnimationImg {
      //   position: absolute;
      //   left: 232px;
      //   top: 15px;
      // }
    }
    .rightAnimation {
      position: absolute;
      top: 380px;
      left: 50%;
      height: 71px;
      background: url("~@/assets/login/rightImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .rightAnimationMove {
      position: absolute;
      top: 380px;
      left: 50%;
      height: 71px;
      background: url("~@/assets/login/rightImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: rightMove ease-in-out 2s;
    }
    @keyframes leftMove {
      from {
        width: 3%;
      }
      to {
        width: 50%;
      }
    }
    @keyframes rightMove {
      from {
        width: 3%;
      }
      to {
        width: 50%;
      }
    }
    .bottomWave {
      width: 100%;
      overflow: hidden;
      height: 100%;
      .beforeAnimation {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        height: 300px;
        overflow: hidden;
        .wave {
          position: absolute;
          // top: -198px;
          bottom: 0;
          width: 6400px;
          height: 300px;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
          transform: translate3d(0, 0, 0);
        }
        .wave:nth-of-type(2) {
          top: 30px;
          -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
            swell 7s ease -1.25s infinite;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
            swell 7s ease -1.25s infinite;
          opacity: 1;
        }
      }
    }

    @keyframes wave {
      0% {
        margin-left: 0;
      }
      100% {
        margin-left: -1600px;
      }
    }

    @keyframes swell {
      0%,
      100% {
        transform: translate3d(0, -25px, 0);
      }
      50% {
        transform: translate3d(0, 5px, 0);
      }
    }
    .beforeAnimationMove {
      position: absolute;
      top: 500px;
      width: 100%;
      left: 0;
      height: 300px;
      background: url("~@/assets/login/beforeWave.png");
      background-repeat: no-repeat;
      background-size: 150% 100%;
      animation: beforeMove ease 10s;
    }
    @keyframes beforeMove {
      from {
        background-size: 100% 100%;
      }
      to {
        background-size: 150% 100%;
      }
    }
    .afterAnimation {
      position: absolute;
      top: 500px;
      width: 100%;
      left: 0;
      height: 300px;
      background: url("~@/assets/login/afterWave.png");
      background-repeat: no-repeat;
      background-size: 150% 100%;
      animation: afterMove ease 6s;
    }
    @keyframes afterMove {
      from {
        background-size: 100% 100%;
      }
      to {
        background-size: 150% 100%;
      }
    }
  }
}
@media screen and (min-width: 1024px) and (max-width: 1500px) {
  .login {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("~@/assets/login/login_bg.png");
    background-size: 100% 100%;
    overflow: hidden;

    .login_serviceTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 60px;
      .imgTitle {
        width: 60%;
      }
    }
    .login_operationPanel {
      width: 100%;
      display: flex;
      margin-top: 50px;

      align-items: center;
      justify-content: center;
      .login_operationPanelBg {
        width: 500px;
        height: 546px;
        background: url("~@/assets/login/opBg.png");
        background-size: 100% 100%;
        // padding: 86px 3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        z-index: 99;
        .loginOperationPanel_title {
          width: 100%;
          letter-spacing: 7px;
          text-align: center;
          height: 60px;
          font-size: 28px;
          color: white;
          float: left;
        }
        .loginOperationPanel_inputArea {
          width: 100%;
          box-sizing: border-box;
          float: left;
          padding: 0 20%;

          .loginOperationPanel_input {
            width: 88%;
            margin: 0 6% 20px 6%;
            height: 56px;
            border: 4px solid #78c6ff;
            box-sizing: border-box;
            background: #f2fbff;
            border-radius: 8px;
            padding: 0 18px;
            color: #183482;
            font-size: 22px;
          }
          .loginOperationPanel_input:focus {
            border: 4px solid #78c6ff;
            outline: none;
          }
          .loginOperationPanel_input::-webkit-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input::-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-ms-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_rememberMeBg {
            width: 100%;
            height: 40px;
            .loginPanelRemember_checkbox {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox.png");
            }
            .loginPanelRemember_checkbox_o {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox_o.png");
            }
            .loginPanelRemember_text {
              color: white;
              font-size: 17px;
              line-height: 23px;
              float: left;
              margin-left: 12px;
            }
          }
          .loginpanel_btn {
            width: 100%;
            height: 56px;
            cursor: pointer;
            background: url("~@/assets/login/login_btn.png");
            background-size: 100% 100%;
          }
        }
      }
    }
    .leftAnimation {
      position: absolute;
      width: 50%;
      top: 380px;
      left: 0;
      height: 71px;
      line-height: 71px;
      background: url("~@/assets/login/leftImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .leftAnimationImg {
        position: absolute;
        left: 232px;
        top: 15px;
      }
    }
    .leftAnimationMove {
      position: absolute;
      top: 380px;
      left: 0;
      height: 71px;
      line-height: 71px;
      background: url("~@/assets/login/leftImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: leftMove ease-in-out 3s;
      // .leftAnimationImg {
      //   position: absolute;
      //   left: 232px;
      //   top: 15px;
      // }
    }
    .rightAnimation {
      position: absolute;
      top: 380px;
      left: 50%;
      height: 71px;
      background: url("~@/assets/login/rightImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .rightAnimationMove {
      position: absolute;
      top: 380px;
      left: 50%;
      height: 71px;
      background: url("~@/assets/login/rightImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: rightMove ease-in-out 2s;
    }
    @keyframes leftMove {
      from {
        width: 3%;
      }
      to {
        width: 50%;
      }
    }
    @keyframes rightMove {
      from {
        width: 3%;
      }
      to {
        width: 50%;
      }
    }
    .bottomWave {
      width: 100%;
      overflow: hidden;
      height: 100%;
      .beforeAnimation {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        height: 300px;
        overflow: hidden;
        .wave {
          position: absolute;
          // top: -198px;
          bottom: 0;
          width: 6400px;
          height: 300px;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
          transform: translate3d(0, 0, 0);
        }
        .wave:nth-of-type(2) {
          top: 30px;
          -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
            swell 7s ease -1.25s infinite;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
            swell 7s ease -1.25s infinite;
          opacity: 1;
        }
      }
    }

    @keyframes wave {
      0% {
        margin-left: 0;
      }
      100% {
        margin-left: -1600px;
      }
    }

    @keyframes swell {
      0%,
      100% {
        transform: translate3d(0, -25px, 0);
      }
      50% {
        transform: translate3d(0, 5px, 0);
      }
    }
    .beforeAnimationMove {
      position: absolute;
      top: 500px;
      width: 100%;
      left: 0;
      height: 300px;
      background: url("~@/assets/login/beforeWave.png");
      background-repeat: no-repeat;
      background-size: 150% 100%;
      animation: beforeMove ease 10s;
    }
    @keyframes beforeMove {
      from {
        background-size: 100% 100%;
      }
      to {
        background-size: 150% 100%;
      }
    }
    .afterAnimation {
      position: absolute;
      top: 500px;
      width: 100%;
      left: 0;
      height: 300px;
      background: url("~@/assets/login/afterWave.png");
      background-repeat: no-repeat;
      background-size: 150% 100%;
      animation: afterMove ease 6s;
    }
    @keyframes afterMove {
      from {
        background-size: 100% 100%;
      }
      to {
        background-size: 150% 100%;
      }
    }
  }
}
@media screen and (min-width: 1501px) {
  .login {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("~@/assets/login/login_bg.png");
    background-size: 100% 100%;
    overflow: hidden;

    .login_serviceTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 80px;
      .imgTitle {
        width: 55%;
      }
    }
    .login_operationPanel {
      width: 100%;
      display: flex;
      margin-top: 50px;

      align-items: center;
      justify-content: center;
      .login_operationPanelBg {
        width: 600px;
        height: 656px;
        background: url("~@/assets/login/opBg.png");
        background-size: 100% 100%;
        // padding: 86px 3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        z-index: 99;
        .loginOperationPanel_title {
          width: 100%;
          letter-spacing: 7px;
          text-align: center;
          height: 60px;
          font-size: 34px;
          color: white;
          float: left;
        }
        .loginOperationPanel_inputArea {
          width: 100%;
          box-sizing: border-box;
          float: left;
          padding: 0 20%;

          .loginOperationPanel_input {
            width: 88%;
            margin: 0 6% 20px 6%;
            height: 66px;
            border: 4px solid #78c6ff;
            box-sizing: border-box;
            background: #f2fbff;
            border-radius: 8px;
            padding: 0 18px;
            color: #183482;
            font-size: 22px;
          }
          .loginOperationPanel_input:focus {
            border: 4px solid #78c6ff;
            outline: none;
          }
          .loginOperationPanel_input::-webkit-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input::-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-ms-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_rememberMeBg {
            width: 100%;
            height: 45px;
            .loginPanelRemember_checkbox {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox.png");
            }
            .loginPanelRemember_checkbox_o {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox_o.png");
            }
            .loginPanelRemember_text {
              color: white;
              font-size: 17px;
              line-height: 23px;
              float: left;
              margin-left: 12px;
            }
          }
          .loginpanel_btn {
            width: 100%;
            height: 68px;
            cursor: pointer;
            background: url("~@/assets/login/login_btn.png");
            background-size: 100% 100%;
          }
        }
      }
    }
    .leftAnimation {
      position: absolute;
      width: 50%;
      top: 380px;
      left: 0;
      height: 71px;
      line-height: 71px;
      background: url("~@/assets/login/leftImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .leftAnimationImg {
        position: absolute;
        left: 232px;
        top: 15px;
      }
    }
    .leftAnimationMove {
      position: absolute;
      top: 380px;
      left: 0;
      height: 71px;
      line-height: 71px;
      background: url("~@/assets/login/leftImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: leftMove ease-in-out 3s;
      // .leftAnimationImg {
      //   position: absolute;
      //   left: 232px;
      //   top: 15px;
      // }
    }
    .rightAnimation {
      position: absolute;
      top: 380px;
      left: 50%;
      height: 71px;
      background: url("~@/assets/login/rightImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .rightAnimationMove {
      position: absolute;
      top: 380px;
      left: 50%;
      height: 71px;
      background: url("~@/assets/login/rightImg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: rightMove ease-in-out 2s;
    }
    @keyframes leftMove {
      from {
        width: 3%;
      }
      to {
        width: 50%;
      }
    }
    @keyframes rightMove {
      from {
        width: 3%;
      }
      to {
        width: 50%;
      }
    }
    .bottomWave {
      width: 100%;
      overflow: hidden;
      height: 100%;
      .beforeAnimation {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        height: 300px;
        overflow: hidden;
        .wave {
          position: absolute;
          // top: -198px;
          bottom: 0;
          width: 6400px;
          height: 300px;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
          transform: translate3d(0, 0, 0);
        }
        .wave:nth-of-type(2) {
          top: 30px;
          -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
            swell 7s ease -1.25s infinite;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
            swell 7s ease -1.25s infinite;
          opacity: 1;
        }
      }
    }

    @keyframes wave {
      0% {
        margin-left: 0;
      }
      100% {
        margin-left: -1600px;
      }
    }

    @keyframes swell {
      0%,
      100% {
        transform: translate3d(0, -25px, 0);
      }
      50% {
        transform: translate3d(0, 5px, 0);
      }
    }
    .beforeAnimationMove {
      position: absolute;
      top: 500px;
      width: 100%;
      left: 0;
      height: 300px;
      background: url("~@/assets/login/beforeWave.png");
      background-repeat: no-repeat;
      background-size: 150% 100%;
      animation: beforeMove ease 10s;
    }
    @keyframes beforeMove {
      from {
        background-size: 100% 100%;
      }
      to {
        background-size: 150% 100%;
      }
    }
    .afterAnimation {
      position: absolute;
      top: 500px;
      width: 100%;
      left: 0;
      height: 300px;
      background: url("~@/assets/login/afterWave.png");
      background-repeat: no-repeat;
      background-size: 150% 100%;
      animation: afterMove ease 6s;
    }
    @keyframes afterMove {
      from {
        background-size: 100% 100%;
      }
      to {
        background-size: 150% 100%;
      }
    }
  }
}
@media screen and (max-width: 827px) {
  .login {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("~@/assets/login/login_bg.png");
    background-size: 100% 100%;
    .login_serviceTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 80px;
      .imgTitle {
        width: 70%;
      }
    }
    .login_operationPanel {
      width: 100%;
      margin-top: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      .login_operationPanelBg {
        width: 661px;
        height: 710px;
        background: url("~@/assets/login/opBg.png");
        background-size: 100% 100%;
        // padding: 86px 3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        z-index: 99;

        .loginOperationPanel_title {
          width: 100%;
          text-align: center;
          height: 60px;
          font-size: 34px;
          color: white;
          float: left;
        }
        .loginOperationPanel_inputArea {
          width: 100%;
          box-sizing: border-box;
          float: left;
          padding: 0 20%;
          .loginOperationPanel_input {
            width: 100%;
            margin-bottom: 23px;
            height: 66px;
            border: 4px solid #388b93;
            box-sizing: border-box;
            background: unset;
            border-radius: 8px;
            padding: 0 18px;
            color: white;
            font-size: 22px;
          }
          .loginOperationPanel_input:focus {
            border: 4px solid #62d1dc;
            outline: none;
          }
          .loginOperationPanel_input::-webkit-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input::-moz-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_input:-ms-input-placeholder {
            color: rgba(24, 52, 130, 0.75);
            font-size: 16px;
          }
          .loginOperationPanel_rememberMeBg {
            width: 100%;
            height: 45px;
            .loginPanelRemember_checkbox {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox.png");
            }
            .loginPanelRemember_checkbox_o {
              float: left;
              cursor: pointer;
              width: 20px;
              height: 23px;
              background: url("~@/assets/login/login_checkbox_o.png");
            }
            .loginPanelRemember_text {
              color: white;
              font-size: 17px;
              line-height: 23px;
              float: left;
              margin-left: 12px;
            }
          }
          .loginpanel_btn {
            width: 100%;
            height: 68px;
            cursor: pointer;
            background: url("~@/assets/login/login_btn.png");
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
